<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">

    </tbody>
</table>
</body>

</html>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //模拟从后端拿到的数据
    //data数组的每一个元素其实就是一个tr.
    var data = [{
      name: "传智播客",
      url: "http://www.itcast.cn",
      type: "IT最强培训机构"
    }, {
      name: "黑马程序员",
      url: "http://www.itheima.com",
      type: "大学生IT培训机构"
    }, {
      name: "传智前端学院",
      url: "http://web.itcast.cn",
      type: "前端的黄埔军校"
    }];

    //需求:点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr.
    //data这个数组,有多少个元素,就生成多少个tr, 每一个元素又是一个对象,所以对象有多少个键值对就有多少个td.


    //给获取数据按钮设置一个点击事件.
    $('#j_btnGetData').click(function () {
      //1.html();
      //设置内容,内容中有标签会解析; 会覆盖原来的内容的.
       var list = [];
       for(var i = 0 ; i < data.length; i++){
       	//生成tr.
         list.push("<tr>");
         //生成td
         for(var key in data[i]){
           list.push('<td>');
           list.push(data[i][key]);
           list.push('</td>');
         }
         list.push("</tr>");
       }
       //console.log(list.join(""));
       $('#j_tbData').html(list.join(""));


      //2.$();
      // for(var i = 0 ; i < data.length; i++){
      // 	var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
      //   //把创建出来的$tr追加到tbody中去.
      //   $('#j_tbData').append($tr);
      // }



    });



  });
</script>
